import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import { actions, getUser } from "../../store/modules/register";

// 引入css样式
import "./register.css"
class Register extends Component {
    componentDidMount() { }
    render() {
        let { user: { phone, nickname, password }, register: { changeUser, reqRegister }, history } = this.props;
        return (
            <div className="register">
                <h2>注册</h2>
                <div className="main">
                    <div>手机号<input type="text" value={phone} onChange={(e) => changeUser("phone", e.target.value)} /></div>
                    <div>姓名<input type="text" value={nickname} onChange={(e) => changeUser("nickname", e.target.value)} /></div>
                    <div>密码<input type="text" value={password} onChange={(e) => changeUser("password", e.target.value)} /></div>
                    <div><button onClick={() => { reqRegister(history) }}>注 册</button></div>
                </div>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    user: getUser(state)
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ register: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Register);